<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>여행지정보</title>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
	try {
		document.execCommand('BackgroundImageCache', false, true);
	} catch (e) {
	}
</script>
<script type="text/javascript">
	$(document).ready(function(){
		var id = $("#name").val();
		var tourNo = $("#tourNo").val();
		$("#recommend").on("click", function(){
			$.ajax({
				"url":"/Yogiro/tourinfo.do",
				"type":"post",
				"data":{"method":"recommendTourInfo","id":id,"tourNo":tourNo},
				"dataType":"json",
				"success":function(txt){
					alert(txt.rect);
					$("#rect").text(txt.tio.tourRecommend);
				},
				"error":function(xhr, status, errorMsg){
					alert("추천도중 오류 발생 : "+errorMsg);
				}
			});
		});
		
	});
	</script>
<script type="text/javascript">
$(document).ready(function(){
	$("#div").on("click",".deleteBtn",function(){
		var obj = this;
		$.ajax({
			"url":"/Yogiro/comment.do",
			"type":"post",
			"data":{"method":"deleteComment","commentNo": $(obj).attr("commentNo"), "tourNo":$(obj).attr("tourNo")},				
			"success":function(list){
				$("#div").empty();
				for(var i=0;i<list.length;i++){
					var text = "<br><div align='right' style='width:580px' class='deleteBtn' commentNo='"+list[i].commentNo+"' tourNo='"+list[i].tourNo+"'>삭제</div>"
					+"<table cellspacing='0' border='1' width='580px' height='25px' style='background:#FFE65A'>"
					+"<tr><td valign='middle' style='color:#FF0033'>"+list[i].commentGrade+"</td>"
					+"<td>작성자:"+ list[i].memberId +"</td><td style='font-size:12px'>날짜:" +list[i].commentWritedate +"</td></tr></table>"
					+"<table cellspacing='0' border='1' width='580px' height='100px' style='background:#FFFF96'><tr>"
					+"<td valign='top'>"+list[i].commentContent +"</td></tr></table>";
					$("#div").append(text);
				}
			},
			"error":function(xhr, status, errorMsg){
				alert("삭제도중 오류 발생 : "+errorMsg);
			}
		});
	});
	$("#tabs").on("click",function(){
		$.ajax({
			"url":"/Yogiro/comment.do",
			"type":"post",
			"data":{"method":"seleteAllComment","tourNo":$("#tourNo").val()},				
			"success":function(list){
				$("#div").empty();
				for(var i=0;i<list.length;i++){
					var text = "<br><div align='right' style='width:580px' class='deleteBtn' commentNo='"+list[i].commentNo+"' tourNo='"+list[i].tourNo+"'>삭제</div>"
					+"<table cellspacing='0' border='1' width='580px' height='25px' style='background:#FFE65A'>"
					+"<tr><td valign='middle' style='color:#FF0033'>"+list[i].commentGrade+"</td>"
					+"<td>작성자:"+ list[i].memberId +"</td><td style='font-size:12px'>날짜:" +list[i].commentWritedate +"</td></tr></table>"
					+"<table cellspacing='0' border='1' width='580px' height='100px' style='background:#FFFF96'><tr>"
					+"<td valign='top'>"+list[i].commentContent +"</td></tr></table>";
					$("#div").append(text);
				}
			},
			"error":function(xhr, status, errorMsg){
				alert("리스트도중 오류 발생 : "+errorMsg);
			}
		});
	});
	$("#reply").on("click", function(){
		var content = $("#commentContent").val();
		$.ajax({
			"url":"comment.do",
			"type":"post",
			"data":{"method":"insertComment","id":$("#name").val(),"content":content,"grade":$("#grade").val(),"tourNo":$("#tourNo").val()},
			"dataType":"json",
			"success":function(txt){
				var text = "<br><div align='right' style='width:580px' class='deleteBtn' commentNo='"+txt.commentNo+"' tourNo='"+txt.tourNo+"'>삭제</div>"
					+"<table cellspacing='0' border='1' width='580px' height='25px' style='background:#FFE65A'>"
					+"<tr align='left'><td valign='middle' style='color:#FF0033'>"+txt.commentGrade+"</td><td>작성자:"+txt.memberId+"</td><td style='font-size:12px'> "+txt.commentWritedate+" </td></tr></table>"
					+"<table cellspacing='0' border='1' width='580px' height='100px' style='background:#FFFF96'>"
					+"<tr align='left'><td valign='top'>"+txt.commentContent+"</td></tr></table>";
					$("#div").append(text);
					
			},
			"error":function(xhr, status, errorMsg){
				alert("등록도중 오류 발생 : "+errorMsg);
			}
		});
		});
	});
	</script>

<script>
function viewImg(obj){
	$("#viewPic").empty();
	$("#viewPic").append("<img src='"+obj+"' width='598' height='398'>");
}
	$(function() {
		$("#tabs").tabs(); //탭생성
		$("#tabs").css({
			"width" : "600px",
			"font-size" : "10pt",
			"float" : "center"
		});//탭 환경설정
	});
</script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=6097c245d3e876968092fbae0a547925"></script>


</head>
<body>
<div style="margin: 0 auto;">
	<div>
	<table>
	<tr>
	<td width="540">
	<h2>여행지 정보</h2> 
	</td>
	<td align="right">
	<a href="/Yogiro/tourinfo.do?method=selectTourList&page=${param.page}">목록으로</a>
	</td>
	</tr>
	</table>
	<hr>
	</div>
	
	<div id="picture">

			<div>
			<table>
			<tr><td>No. ${requestScope.map.tio.tourNo }</td></tr>
			</table>
				<table width="600" height="400" border="0">
					<tr height="360" align="center">
						<td  id="viewPic" colspan="5">
								<img src="img/${requestScope.map.pto[0].pictureRoute}" width="600" height="400">
						</td>
						</tr>
						<tr >
						<c:forEach items="${requestScope.map.pto}" var="pto" begin="0" end="5">
						<td>
							<c:if test="${empty pto.pictureRoute }">
							<img alt="이미지 없음" width="115" height="97" >
							</c:if>
							<c:if test="${not empty pto.pictureRoute }">
							<img src="img/${pto.pictureRoute }" width="115" height="97" onclick="viewImg(this.src)" style="cursor:pointer;">
							</c:if>
						</td>
						</c:forEach>
					</tr>
				</table>
			</div>
	</div>
	<form action="/Yogiro/tourinfo.do" method="post">
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">기본정보</a></li>
			<li><a href="#tabs-2">지도</a></li>
			<li><a href="#tabs-3">댓글/평점</a></li>
		</ul>
		<div id="tabs-1">
			
				<input type="hidden" name="method" value="getModifyTourInfo">
				
			<table border="1" width="550">
				<tr>
					<td height="30">제목 : ${requestScope.map.tio.tourTitle } </td>
				</tr>
				<tr >
				<td height="30">작성자 : ${requestScope.map.tio.tourWriter } | 작성일시 : ${requestScope.map.tio.tourWritedate } | 조회수 : ${requestScope.map.tio.tourViewcount } | 추천수 : <span id="rect">${requestScope.map.tio.tourRecommend }</span></td>
				</tr>
				<tr>
					<td height="400" valign="top">${requestScope.map.tio.tourContent }</td>
				</tr>
			</table>
				<p>
			
		</div>
		<div id="tabs-2">
				<script type="text/javascript">
				var lat = ${requestScope.map.mto.mapLat};
				var lng = ${requestScope.map.mto.mapLng};
				var oPoint = new nhn.api.map.LatLng(lng, lat);
				</script>
				<script type="text/javascript" src="/Yogiro/js/map_view.js"></script><!-- NAVER MAP -> map.js저장 -->
				<p>
			<p>
		</div>
		
		<div id="tabs-3">
		<div id="div">
		
		</div>
		
		<table style="background:#FAF4C0">
		<tr >
			<td colspan="2">
				<select name="grade"  id="grade">
					<option style="color:#FF0033" value="5">★★★★★</option>
					<option style="color:#FF0033" value="4">★★★★☆</option>
					<option style="color:#FF0033" value="3">★★★☆☆</option>
					<option style="color:#FF0033" value="2">★★☆☆☆</option>
					<option style="color:#FF0033" value="1">★☆☆☆☆</option> 
					<option style="color:#FF0033" value="0">☆☆☆☆☆</option>
				</select>
			</td>
		</tr>
		<tr>
			<td><textarea rows="5" cols="60" id="commentContent"></textarea></td>
			<td><input type="button" value="댓글달기" style="background:pink" id="reply"></td>
		</tr>
		</table>
		<br>
		
		<input type="hidden" name="id" value="${requestScope.map.tio.tourWriter }" id="name">
		<input type="hidden" name="tourNo" value="${requestScope.map.tio.tourNo }" id="tourNo">
		</div>
		<div>
		<table>
		<tr>
		<td><a href="/Yogiro/tourinfo.do?method=selectTourList&page=${param.page}"><img src="img/list.jpg" width="57" height="23" border="0" style="cursor:pointer;"></a></td>
		<td width="180px" align="right">
		<img src="img/ok.jpg" id=recommend width="57" height="68" border="0" style="cursor:pointer;"></td>
		<td width="180px" align="right">
		<c:if test="${requestScope.map.tio.tourWriter==sessionScope.mto.memberName}">
		<input type="submit" value="수정">
		</c:if>
		</td>
		<td width="180px" align="right">
		<c:if test="${requestScope.map.tio.tourWriter==sessionScope.mto.memberName}">
		<a href="/Yogiro/tourinfo.do?method=deleteTourInfo&tourNo=${param.tourNo}&page=${param.page}">삭제</a>
		</c:if>
		</td>
		</tr>
		</table>
		</div>
	</div>
	
			</form>
	</div>
</body>
</html>